/* 
  学习目标：使用subscribe监听仓库
  dispatch与vue中类似，用来调用action
  语法：
    1. dispatch({type: 'xxx'})  💥 dispatch接收的是一个对象，而不能是字符串
    2. reducer() 💥 (state, action) => newState
*/
import { createStore } from 'redux';

const store = createStore(function (state = { count: 0 }, { type }) {
  console.warn('仓库 收到信息了， type值为', type);
  // 1. 根据type计算新的state，并返回。严格遵守react中不可变数据思想，返回新值
  // 👍  推荐的写法
  switch (type) {
    case 'add':
      return {
        ...state,
        count: state.count + 1,
      };
    case 'des':
      return {
        ...state,
        count: state.count - 1,
      };

    default:
      return state;
  }

  // 👎不推荐的写法
  // if (type === 'add') {
  //   return {
  //     ...state,
  //     count: state.count + 1,
  //   };
  // }
  // return state;
});

// console.log(store, 'store');

console.log(store.getState());

// 2. 调用store.dispatch()修改store中的state
// ✅正确的写法:
store.dispatch({ type: 'add' });

// 💥 dispatch接收的是一个对象，而不能是字符串
// store.dispatch('add');

// 3. 再次使用getState()观察state的值
console.log(store.getState());

store.dispatch({ type: 'des' });
console.log(store.getState());

// ----------下方是无关紧要的代码

function App() {
  return <div className="App"></div>;
}

export default App;

// 三个store提供的常用方法
// dispatch: ƒ dispatch(action)
// getState: ƒ getState()
// subscribe:

/**
  学习目标：
  步骤：
    1. 
   2. 
   3. 
 */
